<template>
  <div class="app-container">
    <h1>工位调度管理系统</h1>
    
    <!-- 工件生成与统计展示区域 -->
    <div style="margin-bottom: 30px;">
      <!-- 输入生产计划编号 -->
      <el-input v-model="pplansheet" placeholder="请输入生产计划编号" style="width: 200px; margin-right: 10px;" />
      <el-button type="primary" @click="handleGenerate">生成工件</el-button>
    </div>

    <!-- 工件生成结果弹窗 -->
    <el-dialog
      v-model="showPieceDialog"
      title="工件生成结果"
      width="600px"
      :close-on-click-modal="true"
      :destroy-on-close="true"
    >
      <!-- 产品统计表格 -->
      <el-table :data="productStats" style="margin-bottom: 20px;" v-if="productStats.length">
        <el-table-column prop="pid" label="产品号" />
        <el-table-column prop="planTotal" label="计划总数" />
        <el-table-column prop="produced" label="已生成数" />
        <el-table-column prop="needProduce" label="还需生产数" />
      </el-table>
      <!-- 新生成工件列表 -->
      <div v-if="newPieces.length">
        <h4>新生成工件</h4>
        <ul>
          <li v-for="p in newPieces" :key="p.id">{{ p.id }} (产品号: {{ p.pid }})</li>
        </ul>
      </div>
      <!-- 已存在工件列表 -->
      <div v-if="existedPieces.length">
        <h4>已存在工件</h4>
        <ul>
          <li v-for="p in existedPieces" :key="p.id">{{ p.id }} (产品号: {{ p.pid }})</li>
        </ul>
      </div>
    </el-dialog>
    
    <div class="workstation-buttons">
      <el-button 
        v-for="ws in workstations" 
        :key="ws.id"
        :type="activeWorkstations.includes(ws.id) ? 'primary' : ''"
        @click="toggleWorkstation(ws.id)"
        class="ws-button"
      >
        工位{{ ws.id }}
      </el-button>
    </div>
    
    <div class="actions">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
      <el-button type="primary" @click="handleSchedule" :icon="Refresh" :loading="isScheduling">
        重新调度
      </el-button>
      <el-button @click="refreshAll" :icon="RefreshRight">
        刷新状态
      </el-button>
    </div>
    
    <div class="workstation-grid" :class="{ 'fullscreen-mode': fullscreenCard }">
      <WorkstationCard 
        v-for="ws in activeWorkstations" 
        :key="ws"
        :workstation="{ id: ws }"
        :is-expanded="expandedWorkstation === ws"
        :is-fullscreen="fullscreenCard === ws"
        @refresh="refreshAll"
        @toggle-expand="toggleExpand"
        @toggle-fullscreen="toggleFullscreen"
      />
    </div>
    
    <div v-if="activeWorkstations.length === 0" class="empty-state">
      请点击上面的工位按钮查看详情
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Refresh, RefreshRight } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import WorkstationCard from './components/WorkstationCard.vue'
import dispatchApi from './api/dispatch'

const workstations = Array.from({ length: 12 }, (_, i) => ({ id: String(i + 1) }))
const activeWorkstations = ref([])
const expandedWorkstation = ref('')
const fullscreenCard = ref('')
const isScheduling = ref(false)

// 控制弹窗显示/隐藏
const showPieceDialog = ref(false)
// 生产计划编号
const pplansheet = ref('')
// 产品统计信息
const productStats = ref([])
// 新生成工件列表
const newPieces = ref([])
// 已存在工件列表
const existedPieces = ref([])

const toggleWorkstation = (wsId) => {
  const index = activeWorkstations.value.indexOf(wsId)
  if (index === -1) {
    activeWorkstations.value.push(wsId)
  } else {
    activeWorkstations.value.splice(index, 1)
    if (expandedWorkstation.value === wsId) {
      expandedWorkstation.value = ''
    }
    if (fullscreenCard.value === wsId) {
      fullscreenCard.value = ''
    }
  }
}

const toggleExpand = (wsId) => {
  if (fullscreenCard.value) return
  expandedWorkstation.value = expandedWorkstation.value === wsId ? '' : wsId
}

const toggleFullscreen = (wsId) => {
  if (wsId === fullscreenCard.value) {
    fullscreenCard.value = ''
  } else {
    fullscreenCard.value = wsId
    expandedWorkstation.value = wsId
  }
}

const handleSchedule = async () => {
  isScheduling.value = true
  try {
    await dispatchApi.schedulePieces()
    ElMessage.success('调度成功')
    refreshAll()
  } catch (error) {
    ElMessage.error(error.message || '调度失败')
  } finally {
    isScheduling.value = false
  }
}

const refreshAll = () => {
  activeWorkstations.value = [...activeWorkstations.value]
}

// 生成工件并获取统计信息，弹窗展示结果
const handleGenerate = async () => {
  if (!pplansheet.value) {
    ElMessage.warning('请输入生产计划编号')
    return
  }
  try {
    // 调用后端接口生成工件
    const res = await dispatchApi.generatePieces(pplansheet.value)
    // 更新统计与工件列表
    productStats.value = res.productStats || []
    newPieces.value = res.newPieces || []
    existedPieces.value = res.existedPieces || []
    showPieceDialog.value = true // 打开弹窗
    ElMessage.success('工件生成完成')
  } catch (e) {
    ElMessage.error(e.message)
  }
}
</script>

<style scoped>
.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}

.workstation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.ws-button {
  min-width: 80px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.workstation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 10px;
  transition: all 0.3s ease;
}

.workstation-grid.fullscreen-mode {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  z-index: 1000;
  padding: 20px;
  overflow: auto;
}

.empty-state {
  text-align: center;
  color: #888;
  padding: 50px 0;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .workstation-grid:not(.fullscreen-mode) {
    grid-template-columns: 1fr;
  }
}
</style>